<template>
  <div>
    <el-form :inline="true" :model="pageParams">
      <el-form-item label="会员名称">
        <el-input clearable v-model="pageParams.userName" placeholder="会员名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="multipleTable" :data="tableData" :max-height="tableH" :height="tableH" border>
      <el-table-column prop="userName" label="会员名称" show-overflow-tooltip width="200"></el-table-column>
      <el-table-column prop="mobile" label="手机" show-overflow-tooltip width="120"></el-table-column>
      <el-table-column label="反馈类型" width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <template v-if="scope.row.feedType == 1"> 商品相关 </template>
            <template v-else-if="scope.row.feedType == 2"> 物流状况 </template>
            <template v-else-if="scope.row.feedType == 3"> 客户服务 </template>
            <template v-else-if="scope.row.feedType == 4"> 优惠活动 </template>
            <template v-else-if="scope.row.feedType == 5"> 功能异常 </template>
            <template v-else-if="scope.row.feedType == 6"> 产品建议 </template>
            <template v-else-if="scope.row.feedType == 7"> 其他 </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="详细内容" show-overflow-tooltip width="300"></el-table-column>
      <el-table-column prop="addTime" label="反馈时间" width="140"></el-table-column>
      <el-table-column label="操作" align="center" :width="!$route.meta.manage ? '150' : '150'">
        <template slot-scope="scope">
          <el-popconfirm v-if="$route.meta.manage" title="确定删除吗？" @confirm="removeOne(scope.row.id)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageParams.pageNo"
      background
      layout="total, prev, pager, next, jumper, sizes"
      :page-size="pageParams.pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import { deleteById, getList } from '@/api/feedback';

import { mapState } from 'vuex';
import { getStyle } from '@/utils/common';

export default {
  name: 'Feedback',
  data() {
    return {
      loading: false,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        userName: '',
      },
      dialogVisible: false,
      tableData: [],
      total: 0,
    };
  },
  computed: {
    ...mapState('layout', ['tableHeight']),

    tableH() {
      if (this.tableHeight) {
        let html = getStyle(document.documentElement);
        let htmlFont = Number(html.fontSize.replace('px', ''));
        return this.tableHeight - 1.5 * htmlFont;
      }
      return null;
    },
  },
  methods: {
    handleSearch() {
      this.loadData();
    },
    loadData() {
      this.loading = true;
      getList(this.pageParams)
        .then((res) => {
          if (res.data) {
            this.tableData = res.data;
            this.total = (res.additionalProperties.page && res.additionalProperties.page.total) || res.data.length;
          }
        })
        .finally(() => (this.loading = false));
    },
    removeOne(agencyId) {
      deleteById(agencyId).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success',
        });
        this.loadData();
      });
    },
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(pageNo) {
      this.pageParams.pageNo = pageNo;
      this.loadData();
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>
